<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Finalove-App-news</title>
		<link rel="stylesheet" href="../resource/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="../resource/css/mint.css">
		<link rel="stylesheet" href="../resource/css/style.css">
		<script src="../resource/js/vue.js"></script>
		<script src="../resource/js/mint.min.js"></script>
		<script src="../resource/js/jquery.min.js"></script>
		<style type="text/css">
			.ct-box{
				margin-top: 40px;
			}
			.mt-button-success {
				color: #fff;
				background-color: #67c23a;
				border-color: #67c23a;
			}
			.mt-checklist {
				position: absolute;
				left: 0;
			}
			.mt-checklist .mint-checklist-title{
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<mt-header fixed :title="title">
				<mt-button icon="back" slot="left" class="closeView"></mt-button>
			</mt-header>
			<div class="ct-box">
				<mt-field label="用户名" placeholder="请输入用户名" v-model="form.user_name"></mt-field>
				<mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="form.email">
					<mt-button size="small" type="primary" @click="getEmailCode">获取验证码</mt-button>
				</mt-field>
				<mt-field label="邮箱验证码" placeholder="请输入邮箱验证码" v-model="form.email_code"></mt-field>
				<mt-field label="密码" placeholder="请输入密码" type="password" v-model="form.passwd"></mt-field>
				<mt-field label="确认密码" placeholder="请确认密码" type="password" v-model="form.repasswd"></mt-field>
				<div @click="seeArgee">
					<mt-cell is-link>
						<mt-checklist class="mt-checklist"
							v-model="form.is_agree"
							:options="['我已阅读并同意']">
						</mt-checklist>
						<a style="color: #26a2ff" >用户使用协议</a>
					</mt-cell>
				</div>
				<mt-button class="mt-button-success" size="large" @click="subForm">确认注册</mt-button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				title:"注册",
				form:{
					user_name:"",
					email:"",
					passwd:"",
					repasswd:"",
					email_code:"",
					is_agree:[],
				},
				userInfo:{
					user_name:"",
					user_passwd:"",
				}
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					// 获取配置
					$.getJSON('../resource/config.json',function(res){
						main.api_prefix = res.api_prefix;
						main.api_key = res.api_key;
						main.app_version = res.app_version;
						main.app_version_check_url = res.app_version_check_url;
					});
					// loading
					document.addEventListener('plusready',function () {
						// 沉浸header
						plus.navigator.setFullscreen(true);
						// header返回btn
						document.querySelector(".closeView").addEventListener('click',function(){
							plus.webview.currentWebview().close();
						});
						// backbutton事件修改
						plus.key.addEventListener('backbutton', function() {
							plus.webview.currentWebview().close();
							return false;
						}, false);
					})
				},
				getEmailCode() {
					if(!this.checkEmail()){
						return false;
					}
					var url = this.api_prefix + "login/getEmailCode";
					var param = {
						api_key:this.api_key,
						params:{
							email:this.form.email
						}
					}
					$.post(url,param,function(res) {
						main.$toast({message:res.msg,position:"top",duration: 1000})
					})
				},
				subForm() {
					if(!this.checkForm()){
						return false;
					}
					if(!this.checkEmail()){
						return false;
					}
					var url = this.api_prefix + "login/register";
					var param = {
						api_key:this.api_key,
						params:{
							user_name:this.form.user_name,
							email:this.form.email,
							email_code:this.form.email_code,
							passwd:this.form.passwd,
							repasswd:this.form.repasswd
						}
					}
					$.post(url,param,function(res) {
						main.$toast({message:res.msg,position:"top",duration: 1000});
						if(res.code == 1){
							plus.storage.setItem("user_id",res.data.user_id);
							plus.storage.setItem("user_name",res.data.user_name);
							plus.storage.setItem("user_head",res.data.user_head);
							this.userInfo = res.data;
							plus.webview.close("registerView");
							plus.webview.close("loginView");
							plus.webview.open("login.html","loginView",{},"slide-in-right",200);
						}
					})
				},
				checkForm() {
					if(this.form.user_name.length < 6 || this.form.user_name.length >15){
						this.$toast({message:"用户名字符长度为6~15位",position:"top",duration: 1000});
						return false;
					}
					if(this.form.passwd.length < 6 || this.form.passwd.length >15){
						this.$toast({message:"密码字符长度为6~15位",position:"top",duration: 1000});
						return false;
					}
					if(this.form.email_code.length != 6){
						this.$toast({message:"邮箱验证码错误",position:"top",duration: 1000});
						return false;
					}
					if(this.form.passwd != this.form.repasswd){
						this.$toast({message:"两次密码输入不一致",position:"top",duration: 1000});
						return false;
					}
					if(this.form.is_agree != '我已阅读并同意'){
						console.log(this.form.is_agree);
						this.$toast({message:"请阅读并同意用户使用协议",position:"top",duration: 1000});
						return false;
					}
					return true;
				},
				checkEmail() {
					var email_reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
					var email = this.form.email;
					if(!email_reg.test(email)){
						this.$toast({message:"邮箱格式错误",position:"top",duration: 1000});
						return false;
					}
					return true;
				},
				seeArgee() {
					plus.webview.close("userAgreement");
					plus.webview.open("me/userAgreement.html","userAgreement",{},"slide-in-right",200);
				}
			}
		})
	</script>
</html>
